<template>
    <div>
        <el-cascader
                style="line-height: 26px"
                :placeholder="jobname"
                v-model="name"
                size="small"
                :show-all-levels="false"
                :options="jobList"
                @active-item-change="handleJobItemChange"
                :props="jobProps"
                @change="jobItemChange">
        </el-cascader>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {mapGetters} from 'vuex';
    import axios from '~/plugins/axios';
    import {Cascader} from 'element-ui';
    Vue.use(Cascader);

    export default {
        props: {
            'from':{
                default:''
            }
        },
        data() {
            return {
                jobProps: {
                    value: 'value',
                    label:'label',
                    level:'level',
                    children: 'children'
                },
                jobname: '请选择岗位',
                name: []
            }
        },
        computed: {
            ...mapGetters({
                jobList: 'getJobList',
                jobName: 'getJobName'
            })
        },
        methods: {
            setJobName(val) {
                this.name = val
            },
            handleJobItemChange(val) {
                let _this = this;
                let index = 0;
                this.jobList.forEach((n,i)=>{
                    if(n.value == val[0]){
                        index = i;
                        return;
                    }
                });
                if(!this.jobList[index].children.length){
                    axios.get(process.env.baseUrl + '/job/jobList',{params:{typeName: val[0]}})

                        .then((response) => {
                            if(!response){return}
                            let result = response.data.data;
                            for(let i=0;i<result.length;i++){
                                let job = {value: result[i].key,label: result[i].value,level:2,children: null};
                                this.jobList[index].children.push(job)
                            }
                        })
                }
            },
            jobItemChange(val){
                switch (this.from){
                    case 'searchForm':
                        this.$parent.$parent.$parent.$parent.$parent['getRoleId'](val);
                        break;
                    case 'positionForm':
                        this.$parent.$parent.$parent.$parent.$parent.$parent['getPositionFormRoleId'](val)
                        break;
                    case 'addUser':
                        this.$parent.$parent.$parent.$parent.$parent['getAddUserJob'](val)
                        break;
                    case 'post':
                        this.$parent.$parent.$parent.$parent.$parent['getPostJob'](val);
                        break;
                }
            }
        },
        created() {
            this.jobname = this.jobName || '请选择岗位'
        }
    }
</script>